<template>
  <div id="daifuList">
      <el-row style="padding: 20px;">
          <h2>代付记录</h2>
      </el-row>

    <el-table :data="tableData"  stripe style="width: 100%" v-loading = 'loading'>
      <el-table-column type="index">
      </el-table-column>
      <el-table-column prop="username" label="用户">
      </el-table-column>
      <el-table-column prop="money" label="提现金额(元)" width="130">
      </el-table-column>
      <el-table-column prop="fee" label="手续费(元)" width="110">
      </el-table-column>
      <el-table-column prop="cardPhone" label="手机号" width="130">
      </el-table-column>
      <el-table-column prop="cardBank" label="银行名称" width="120">
      </el-table-column>
      <el-table-column prop="cardNo" label="卡号" width="120">
      </el-table-column>
      <el-table-column prop="remark" label="备注" width="120">
      </el-table-column>
      <el-table-column prop="cardPerson" label="持卡人">
      </el-table-column>
      <el-table-column prop="cardPerson" label="提现确认" width="120">
        <template slot-scope='scope'>
          <el-row style="white-space: nowrap">
            <el-button type="primary" size="mini" @click="tixianSuccess(scope.row.id)">确认</el-button>
            <el-button type="primary" size="mini" @click="tixianFail(scope.row.id)">取消</el-button>
          </el-row>

        </template>
      </el-table-column>
      <el-table-column prop="status" label="处理结果"  width="100">
      </el-table-column>
      <el-table-column prop="createTime" label="申请时间"  width="130" >
      </el-table-column>
      <el-table-column prop="finishTime" label="处理时间" width="130" >
      </el-table-column>
    </el-table>

    <div class="block" style="text-align: right;padding-right: 40px;">

      <el-pagination :current-page.sync="pageNumber" @current-change='handleChange' :page="pageNumber" :page-size="pageSize" layout="total, prev, pager, next" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import dateformat from 'dateformat'
  export default {
    name: "requireList",
    data () {
      return {
        status: [{
          value: 1,
          label: '带处理'
        },
          {
            value: 7,
            label: '成功'
          },
          {
            value: 8,
            label: '失败'
          }
        ],
        userAsk: [],
        businessAsk:[],
        cashInfo: {
          userId: '',
          status: '',
          beginTime: '',
          endTime: '',
          pageSize: 10,
          pageNumber: 1
        },
        tableData: [],
        pageSize:10,
        pageNumber: 1,
        total:1,
        loading:false,
        remark:'',
        successDialogVisible:false
      }
    },
    created() {
      //this.requireCash()
     // this.getDaifuList()
    },
    methods: {
      getDaifuList() {
         this.$api.getDaifuList().then(res=>{

         })
      },
      requireCash() {
        let params = {
          total: 0
        }
        this.$api.requireCash(params).then(res => {
          if(res.code == '000000') {
            console.log(res.data);
            this.$message({
              type: "success",
              message: "申请成功"
            })
          }
        })
      },
      tixianSuccess(id){
        this.$confirm('提现成功，此操作将不可逆, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$prompt('备注', '备注', {
            confirmButtonText: '确定',
            cancelButtonText: '取消'
          }).then(({ value }) => {
            if (!value) {
              value = ''
            }
            this.$api.tixianSuccess(id,{remark:value}).then(res =>{
              if(res.code == '000000'){
                this.$message.success("确认提现成功");
                this.getCashList()
              }
            })
          }).catch(() => { })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })

      },
      tixianFail(id){
        this.$confirm('提现成功，此操作将不可逆, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$prompt('备注', '备注', {
            confirmButtonText: '确定',
            cancelButtonText: '取消'
          }).then(({ value }) => {
            if (!value) {
              value = ''
            }
            this.$api.tixianFail(id,{remark:value}).then(res =>{
              if(res.code == '000000'){
                this.$message.success("取消提现成功");
                this.getCashList()
              }
            })
          }).catch(() => { })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      },
      handleChange(val){
        this.pageNumber = val;
        this.getCashList()
      }
    }
  }
</script>

<style lang="less">
  #daifuList {
    th {
      text-align: center;
    }
    .el-input__inner {
      height: 20px;
      font-size: 12px;
    }
    .el-input {
      width: 80px;
      display: inline-block;
      margin: 0 8px;
    }
    .header {
      padding: 18px 40px;
      font-size: 12px;
      white-space: nowrap;
      display: flex;
      justify-content: center;
    }
    .width1 {
      width: 160px;
    }
  }
</style>
